<template>
  <SubMenu>
    <template #title><!--#title为了标识区分插槽-->
      {{data.title}}
    </template>
    <template v-for="child in data.children">
      <MenuItem :key="child.title" v-if="!child.children">{{child.title}}</MenuItem>
      <!--ReSubMenu跟name的名字保持一致，相当于循环使用该组件-->
      <ReSubMenu v-else :key="child.title" :data="child"></ReSubMenu>
    </template>
  </SubMenu>

</template>

<script>
import SubMenu from './SubMenu'
import MenuItem from './MenuItem'
export default {
  name: "ReSubMenu",//可以使用递归组件
  props:{
    data:{
      type:Object,//属性校验，为对象数据类型，并且如果没有赋值，默认给一个空对象
      default:()=>({})
    }
  },
  components:{
    SubMenu,
    MenuItem
  }
}
</script>

<style scoped>

</style>
